<template>
  <div class="app-container">
    <el-dialog
      :visible.sync="open"
      :fullscreen="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :show-close="false">
      <div style="
      border-bottom: 1px solid rgb(232,232,232);
      position: absolute;
      top: 0; left: 0;
      height: 70px; width: 100%;
      line-height: 70px; padding-left: 20px; padding-right: 20px;">
        <span style="font-weight: bold; font-size: 20px;">{{ key }} —— 权限控制</span>

        <div style="float:right;">
          <el-button type="primary" icon="el-icon-plus" @click="handleAddButton()">新增关联</el-button>
          <el-button plain icon="el-icon-close" @click="handleClose()"></el-button>
        </div>
      </div>

      <el-table
        ref="multipleTable"
        :data="authList"
        border
        tooltip-effect="dark"
        style="width: 100%; margin-top: 40px;">
        <el-table-column
          prop="roleId"
          align="center"
          label="角色ID">
        </el-table-column>
        <el-table-column
          prop="roleKey"
          align="center"
          label="角色标识">
        </el-table-column>
        <el-table-column
          prop="roleName"
          align="center"
          label="角色名称">
        </el-table-column>
        <el-table-column
          fixed="right"
          align="center"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleDeleteProcess(scope.row.roleId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>


    <el-dialog
      :visible.sync="openAdd"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :show-close="false">
      <div style="
      border-bottom: 1px solid rgb(232,232,232);
      position: absolute;
      top: 0; left: 0;
      height: 70px; width: 100%;
      line-height: 70px; padding-left: 20px; padding-right: 20px;">
        <span style="font-weight: bold; font-size: 20px;">添加关联</span>

        <div style="float:right;">
          <el-button plain icon="el-icon-close" @click="openAdd = false"></el-button>
        </div>
      </div>

      <el-table
        ref="multipleTable"
        :data="notAuthList"
        border
        tooltip-effect="dark"
        style="width: 100%; margin-top: 40px;"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          align="center"
          width="55">
        </el-table-column>
        <el-table-column
          prop="roleId"
          align="center"
          label="角色ID">
        </el-table-column>
        <el-table-column
          prop="roleKey"
          align="center"
          label="角色标识">
        </el-table-column>
        <el-table-column
          prop="roleName"
          align="center"
          label="角色名称">
        </el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleAddAuth()">确 定</el-button>
        <el-button @click="openAdd = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>


import {deleteRoleProcess, insertRoleProcess, selectRoleProcess, selectRoleProcessByKey} from "@/api/system/role";

export default {
  name: "index",
  data() {
    return {
      selectVersionList: [],
      authList: [],
      total: 0,

      key: '',
      open: false,

      openAdd: false,
      notAuthList: [],
      selectNotAuthList: [],
    }
  },
  methods: {
    init(key){
      this.key = key
      this.open = true
      // 初始化流程定义列表
      selectRoleProcessByKey(key)
        .then(({data}) => {
          this.authList = data
        }).catch(() => {
          this.open = false
      })
    },
    handleAddButton() {
      this.openAdd = true
      selectRoleProcess(this.key)
        .then(({data}) => {
          this.notAuthList = data
        }).catch()
    },
    handleClose() {
      this.open = false
    },
    handleDeleteProcess(roleId){
      this.$confirm('此操作将永久删除该关联, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteRoleProcess({roleId: roleId, processKey: this.key})
          .then(() => {
            this.$message({type: 'success', message: '删除成功!'})
            this.init(this.key)
          }).catch()
      }).catch(() => {})
    },
    handleSelectionChange(val) {
      this.selectNotAuthList = val
    },
    handleAddAuth() {
      if(this.selectNotAuthList.length > 0){
        let data = []
        this.selectNotAuthList.forEach((item) => {
          data.push({
            roleId: item.roleId,
            processKey: this.key
          })
        })
        insertRoleProcess(data)
          .then(() => {
            this.$message({type: 'success', message: '添加关联成功!'})
            this.init(this.key)
            this.openAdd = false
          }).catch()
      } else {
        this.$message({type: 'warning', message: '请选择角色!'})
      }
    },
  },
}
</script>

<style scoped>
.module {
  position: absolute;
  top: 70px;
  left: 0;
  width: 100%;
  padding: 0;
}
.download{
  display: inline-block;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  width: 89px;
  color: #606266;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  margin: 10px;
  text-align: center;
}
.download:hover{
  color: #409eff;
  border: 1px solid #409eff;
  cursor: pointer;
}
</style>
